import React,{useState,useEffect,useRef} from "react"
import { Button, Card , Form ,Table , Input ,Modal,notification, message} from 'antd'
import { PlusOutlined ,SearchOutlined , DeleteOutlined,ExclamationCircleOutlined} from '@ant-design/icons'
import { getToken,addKeyFn } from '../../utils/utils'
import axios from 'axios'
function ActivityManage(){
    const [tableData,setTableData] = useState([])
    // 获取列表
    useEffect(()=>{
        axios.get('/my/activity/activitylist',{
            headers:{
                'Authorization':getToken()
            }
        }).then(res=>{
            const result = JSON.stringify(res.data.data)
            setTableData(addKeyFn(JSON.parse(result)))
        })
    },[])
 
    const [isShow,setIsShow] = useState(false)
    const [myForm] = Form.useForm()
    const addForm = useRef(null)
    // 删除
   
    // 删除操作
    const deleMethod =(item)=>{
        // 当前页面同步状态
        setTableData(tableData.filter(data=>data.activityId !== item.activityId))
        const activityId = item.activityId
        console.log(item)
        //要前后端同步
        axios.get('/my/activity/delete/'+activityId,{
            headers:{'Authorization':getToken()}
        })
    }
    const confirmMethod=(item)=>{
        Modal.confirm({
            title: '您确定要删除吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                console.log('ok')
                deleMethod(item);
                notification.info({
                message:'通知',
                description:'删除成功',
                placement:"bottomRight",
                });
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    // 添加活动
    const addFormOk=()=>{
        addForm.current.validateFields().then(value=>{
            console.log(value.activityTitle)
            setIsShow(false)
            //从post到后端生成ID，方便删除和更新，自增长id
            axios({
                method:'post',
                url:'/my/activity/add',
                headers:{
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization':getToken()
                },
                data:{...value}    
            }).then(res=>{
              notification.info({
                message:'通知',
                description:res.data.message,
                placement:"bottomRight",
              });
            })
          }).catch(err=>{
            console.log(err)
          })
    }
    
    // 活动查询
    const [myform] = Form.useForm()
    // 搜索按钮事件
    const searchBtn = obj=>{
        console.log(obj)
        myform.setFieldsValue({activityTitle:''})
        if(obj.activityTitle === undefined){
            message.success('请输入活动标题')
            return false
        }
        setTableData(tableData.filter(data=>data.activityTitle == obj.activityTitle))
        const activityTitle = obj.activityTitle
        axios.get('/my/activity/activitylist/'+activityTitle,{
            headers:{'Authorization':getToken()}
        })
    }
    const columns = [
        {
            title:'活动索引',
            key:'key',
            dataIndex:'key',
            render:(key)=>{
                return <b>{key}</b>
            }
        },
        {
            title:'活动标题',
            key:'activityTitle',
            dataIndex:'activityTitle',
            render:(activityTitle)=>{
                return <b>{activityTitle}</b>
            }
        }
        ,{
            title:'活动时间',
            key:'activityTime',
            dataIndex:'activityTime',
            render:(activityTime)=>{
                return <b>{activityTime}</b>
            }
        },
        {
            title:'活动图片',
            key:'activityPic',
            dataIndex:'activityPic',
            render:(activityPic)=>{
                return (
                    <img style={{width:"50px",height:'50px'}} src={activityPic}/>
                )
            }

        },
        {
            title:'活动地点',
            key:'activityAdress',
            dataIndex:'activityAdress',
            render:(activityAdress)=>{
                return <b>{activityAdress}</b>
            }

        }
        ,{
            title:'活动详情',
            key:'activityContent',
            // width:'100px',
            // height:'30px',
            dataIndex:'activityContent',
            render:(activityContent)=>{
                return <textarea style={{cols:'40',rows:'10',border:'white'}}>{activityContent}</textarea>
            }
        },{
            title: '操作',
            key:'action',
            render:(item)=>{
              return <div>
                <Button danger shape="circle" 
                  icon={<DeleteOutlined />}  
                  style={{marginRight:"10px"}}
                  onClick={()=>confirmMethod(item)}
                />
              </div>
            }
          },
    ]
    return (
        <div>
            <Card
                title="活动管理"
                extra={
                    <div>
                        <Button type="primary" 
                            icon={<PlusOutlined/>}
                            onClick={()=>{setIsShow(true)}}
                            style={{opacity:0.9,backgroundColor:"Highlight"}}
                        >添加活动</Button>
                    </div>
                }  
            > 
            <Form 
            layout="inline" 
            form={myform}
            onFinish={(n)=>{ searchBtn(n)}}
            >
                <Form.Item label='活动标题' name='activityTitle'>
                    <Input placeholder="请输入要查询的活动标题"/>
                </Form.Item>
                <Button htmlType="submit" type="primary"  icon={<SearchOutlined/>} ></Button>  
             </Form>
            <Table 
                dataSource={tableData}
                columns={columns}
                pagination={{pageSize:3}} 
                rowKey={record=>record.activityId}
                scroll={scroll}
            >
            </Table>
            </Card>
            <Modal
                title="编辑输入框"
                open={isShow}
                maskClosable={false}
                onCancel={()=> setIsShow(false)}
                onOk={()=>{addFormOk()}}
            >
                <Form
                    ref={addForm}
                    form={myForm}
                    labelCol={{span:4}}
                    onFinish={(n)=>{
                        message.success('添加成功')
                    }}
                >
                    <Form.Item label='活动标题' name='activityTitle' rules={[{required:true,message:'请输入活动标题'}]}>
                        <Input placeholder="请输入活动标题" />
                    </Form.Item>
                    <Form.Item label='活动地点' name='activityAdress' rules={[{required:true,message:'请输入活动地点'}]}>
                        <Input placeholder="请输入活动地点" />
                    </Form.Item>
                    <Form.Item label='活动详情' name='activityContent' rules={[{required:true,message:'请输入活动详情'}]}>
                        <Input.TextArea placeholder="请输入活动详情" />
                    </Form.Item>
                    <Form.Item label="图片地址" name="activityPic" rules={[{ required: true, message: '请输入图片地址' }]}>
                        <Input placeholder="请输入图片链接" />
                    </Form.Item>
                    <Form.Item label='活动时间' name='activityTime' rules={[{required:true,message:'请输入开始时间'}]}>
                        <Input placeholder="请输入活动开始时间" />
                    </Form.Item>
                   
                </Form>
            </Modal>
        </div>
    )
}
export default ActivityManage